document.addEventListener('DOMContentLoaded', function () {
  const block = document.querySelector('.three-d-cards-block .flex-row');
  if (!block) return;

  const columns = Array.from(block.querySelectorAll('.flex-column'));
  const newContent = document.createDocumentFragment();
  const wrappers = [];

  // ===== Создание карточек =====
  for (let i = 0; i < columns.length; i += 2) {
    const front = columns[i];
    const back = columns[i + 1];
    if (!front || !back) continue;

    const wrapper = document.createElement('div');
    wrapper.classList.add('card-wrapper');

    const inner = document.createElement('div');
    inner.classList.add('card-inner');

    front.classList.add('card-front');
    back.classList.add('card-back');

    inner.appendChild(front);
    inner.appendChild(back);
    wrapper.appendChild(inner);
    newContent.appendChild(wrapper);
    wrappers.push(wrapper);
  }

  block.innerHTML = '';
  block.appendChild(newContent);

  // ===== Раскрашивание front/back двумя цветами =====
  const colors = ['var(--darker-main-light)', 'var(--very-light-accent)'];

  wrappers.forEach((wrapper, index) => {
    let frontColor;
    const last1 = wrappers[index - 1]?.dataset.color;
    const last2 = wrappers[index - 2]?.dataset.color;

    // Выбираем front с ограничением "не более двух подряд"
    do {
      frontColor = colors[Math.floor(Math.random() * colors.length)];
    } while (frontColor === last1 && frontColor === last2);

    const backColor = colors.find(c => c !== frontColor); // другой цвет для back

    const front = wrapper.querySelector('.card-front');
    const back = wrapper.querySelector('.card-back');

    front.style.backgroundColor = frontColor;
    back.style.backgroundColor = backColor;

    wrapper.dataset.color = frontColor; // запоминаем front для проверки следующих
  });

  // ===== Функция установки высот по max(front/back) =====
  function updateHeights() {
    wrappers.forEach(wrapper => {
      const front = wrapper.querySelector('.card-front');
      const back = wrapper.querySelector('.card-back');
      const inner = wrapper.querySelector('.card-inner');

      // Сброс старых высот
      front.style.height = '';
      back.style.height = '';
      inner.style.height = '';
      wrapper.style.height = '';

      const maxInnerHeight = Math.max(front.offsetHeight, back.offsetHeight);

      front.style.height = maxInnerHeight + 'px';
      back.style.height = maxInnerHeight + 'px';
      inner.style.height = maxInnerHeight + 'px';
      wrapper.style.height = maxInnerHeight + 'px';
    });
  }

  updateHeights();
  window.addEventListener('resize', () => requestAnimationFrame(updateHeights));

  // ===== Переворот карточек по клику =====
  wrappers.forEach(wrapper => {
    wrapper.addEventListener('click', () => {
      wrapper.classList.toggle('flipped');
    });
  });
});